<!DOCTYPE html>
<html>

<head>
    <meta name="renderer" content="webkit">
    <!-- <meta content="IE=Edge" http-equiv="X-UA-Compatible"> -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>公共卫生网络信息监测系统</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/manage-role.css">
    <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../js/commen.js" type="text/javascript"></script>
    <script src="../js/manage-role.js" type="text/javascript"></script>

    <link href="../css/sy.css" rel="stylesheet" type="text/css"/>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/component.js"></script>
</head>

<body id="top">
<div id="app">
    <head-template></head-template>
    <div class="main">
        <div class="cw1200 clearfix">
            <system-menu-template active-menu="2"></system-menu-template>
            <div class="rightside fr w980">
                <div class="right-top clearfix">
                    <a class="add-role" href="javascript:;" v-on:click="showAdd()">新增角色</a>
                </div>
                <div class="role-list">
                    <table>
                        <thead>
                        <tr>
                            <th width="180">角色名称</th>
                            <th width="490">人员</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in roleList">
                            <td width="180">{{item.roleName}}</td>
                            <td width="490" class="members">{{userRoleHandle(item.users)}}</td>
                            <td>
                                <a class="edit-role-name" href="javascript:;" v-on:click="showModify(item)">编辑角色名称</a>
                                <span>|</span>
                                <a class="edit-members" href="javascript:;"
                                   v-on:click="getNotAssignedRoleUser(item)">成员管理</a>
                                <span>|</span>
                                <a class="delete-role" href="javascript:;" v-on:click="showDelete(item.id)">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <page-template v-bind:total-count="totalCount" v-bind:query-data="queryData"
                                   v-bind:page-count="pageCount"></page-template>
                </div>
            </div>
            <!--rightside end-->
        </div>
    </div>
    <div class="main footer">
        <p>地址：北京市西城区白广路***********</p>
        <p>电话：010-83******</p>
        <p>版权所有：**省疾病预防控制中心&emsp;&emsp;网站备案：*ICP备********号</p>
    </div>
    <a class="top" name="#top" href="javascript:;" title="回到顶部"></a>
    <!-- 新增角色 -->
    <div class="win win-add-role">
        <div class="win-bg"></div>
        <div class="win-body">
            <h1><span>新增角色</span></h1>
            <div class="win-item clearfix">
                <span>角色名称</span>
                <input type="text" name="" v-model="role.roleName">
            </div>
            <div class="btns">
                <input class="btn btn-down" type="button" value="确定" v-on:click="addRole()"/>
                <input class="btn btn-quit" type="button" value="取消"/>
            </div>
        </div>
    </div>
    <!-- 编辑角色名称 -->
    <div class="win win-edit-role">
        <div class="win-bg"></div>
        <div class="win-body">
            <h1><span>编辑角色名称</span></h1>
            <div class="win-item clearfix">
                <span>角色名称</span>
                <input type="text" name="" v-model="role.roleName">
            </div>
            <div class="btns">
                <input class="btn btn-down" type="button" value="确定" v-on:click="modifyRole()"/>
                <input class="btn btn-quit" type="button" value="取消"/>
            </div>
        </div>
    </div>
    <!-- 成员管理 -->
    <div class="win win-members">
        <div class="win-bg"></div>
        <div class="win-body">
            <h1><span>成员管理</span></h1>
            <div class="win-item clearfix win-search">
                <input class="win-sec-text" type="text" name="">
                <input class="win-sec-btn" type="button" name="" value="搜索" v-on:click="searchNotAssignedRoleUser($event.currentTarget.previousElementSibling.value)">
            </div>
            <div class="win-item clearfix member-list">
                <ul class="all-members fl">
                    <li v-for="item in notAssignedUserList" :data-id="item.id">{{item.username}}</li>
                </ul>
                <div class="add-del-btn fl">
                    <a class="add-members" href="javascript:;">&gt;</a>
                    <a class="del-members" href="javascript:;">&lt;</a>
                </div>
                <ul class="selected-members fl">
                    <li v-for="item in assignedUserList" :data-id="item.id">{{item.username}}</li>
                </ul>
            </div>
            <div class="btns">
                <input class="btn btn-down" type="button" value="确定" v-on:click="modifyRoleUser()"/>
                <input class="btn btn-quit" type="button" value="取消"/>
            </div>
        </div>
    </div>
    <!-- 修改权限 -->
    <div class="win win-edit-power">
        <div class="win-bg"></div>
        <div class="win-body">
            <h1><span>权限设置</span></h1>
            <div class="win-item clearfix">
                <span class="i-title">角色名称：</span>
                <div class="witem-r">应用管理员</div>
            </div>
            <div class="win-item clearfix">
                <span class="i-title">选择权限：</span>
                <div class="witem-r">
                    <ul class="power-list">
                        <li>
                            <div class="checkbox">
                                <input id="cb01" type="checkbox" name="content"/>
                                <label for="cb01"></label>
                            </div>
                            <span>分类管理</span>
                        </li>
                        <li>
                            <div class="checkbox">
                                <input id="cb02" type="checkbox" name="content"/>
                                <label for="cb02"></label>
                            </div>
                            <span>简报管理</span>
                        </li>
                        <li>
                            <div class="checkbox">
                                <input id="cb03" type="checkbox" name="content"/>
                                <label for="cb03"></label>
                            </div>
                            <span>数据统计</span>
                        </li>
                        <li>
                            <div class="checkbox">
                                <input id="cb04" type="checkbox" name="content"/>
                                <label for="cb04"></label>
                            </div>
                            <span>用户管理</span>
                        </li>
                        <li>
                            <div class="checkbox">
                                <input id="cb05" type="checkbox" name="content"/>
                                <label for="cb05"></label>
                            </div>
                            <span>角色管理</span>
                        </li>
                        <li>
                            <div class="checkbox">
                                <input id="cb06" type="checkbox" name="content"/>
                                <label for="cb06"></label>
                            </div>
                            <span>操作日志</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="btns">
                <input class="btn btn-down" type="button" value="确定"/>
                <input class="btn btn-quit" type="button" value="取消"/>
            </div>
        </div>
    </div>
    <!-- 成功 -->
    <div class="win win-success">
        <div class="win-bg"></div>
        <div class="win-body">
            <p>提交成功!</p>
            <div class="btns">
                <input class="btn btn-done" type="button" value="确定"
                       onclick="javascript:$(this).parents('.win-success').hide();"/>
            </div>
        </div>
    </div>
    <!-- 删除 -->
    <div class="win win-delete">
        <div class="win-bg"></div>
        <div class="win-body">
            <p>删除角色将同时删除对应人员的权限，您确认删除该角色吗?</p>
            <div class="btns">
                <input class="btn btn-down" type="button" value="确定" v-on:click="deleteRole()"/>
                <input class="btn btn-quit" type="button" value="取消"/>
            </div>
        </div>
    </div>
</div>
<script src="../js/placeholder.js" type="text/javascript"></script>
</body>
<script type="text/javascript">

    $(function () {
        $(".user_name").append(localStorage.getItem("username"))
    })

    let app = new Vue({
        el: "#app",
        data: {
            queryData: {
                pageNum: 1,
                pageSize: 10
            },
            totalCount: 0,
            pageCount: 0,
            roleList: [],
            notAssignedUserList: [],
            assignedUserList: [],
            role: {}
        },
        methods: {
            initData() {
                axios.get("/roles", {params: app.queryData}).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.roleList = result.list;
                        app.totalCount = result.total;
                        app.pageCount = result.pages;
                    }
                })
            },
            userRoleHandle(users) {
                if (users != null && users.length > 0) {
                    let userArr = users.split(";");
                    let userNames = "";
                    userArr.forEach(function (ele) {
                        userNames += ele.split(",")[1] + ",";
                    })
                    return userNames.substring(0, userNames.length - 1);
                }
            },
            showAdd() {
                app.user = {};
            },
            addRole() {
                axios.post("/role", app.role).then(function (res) {
                    if (res.data.code == 200) {
                        $(".win-success").show();
                        app.initData();
                    }
                })
            },
            showModify(role) {
                app.role = {};
                app.role.id = role.id;
                app.role.roleName = role.roleName;
            },
            modifyRole() {
                axios.put("/role", app.role).then(function (res) {
                    if (res.data.code == 200) {
                        $(".win-success").show();
                        app.initData();
                    }
                })
            },
            showDelete(id) {
                app.role.id = id;
            },
            deleteRole() {
                axios.delete("/role/" + app.role.id).then(function (res) {
                    if (res.data.code == 200) {
                        $(".win-success").show();
                        app.initData();
                    }
                })
            },
            getNotAssignedRoleUser(user) {
                app.role = {};
                app.role.id = user.id;
                axios.get("/role/user/" + user.id).then(function (res) {
                    if (res.data.code == 200) {
                        app.notAssignedUserList = res.data.data;
                    }
                })
                app.assignedUserList = [];
                let users = user.users;
                if (users != null && users.length > 0) {
                    let userArr = users.split(";");
                    userArr.forEach(function (ele) {
                        app.assignedUserList.push({
                            id: ele.split(",")[0],
                            username: ele.split(",")[1]
                        })
                    })
                }
            },
            searchNotAssignedRoleUser(username) {
                console.log(username)
                axios.get("/role/user/" + app.role.id + "?username=" + username).then(function (res) {
                    if (res.data.code == 200) {
                        app.notAssignedUserList = res.data.data;
                    }
                })
            },
            modifyRoleUser() {
                let userIds = [];
                $(".selected-members li").each(function (index, ele) {
                    userIds.push($(ele).data("id"))
                })
                app.role.userIds = userIds;
                axios.put("/role/users", app.role).then(function (res) {
                    if (res.data.code == 200) {
                        app.initData();
                    }
                })
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.initData();
            })
        }
    })
</script>
</html>